<script setup>
import { ref } from 'vue'
import { route } from 'uview-plus'
import { onShow } from '@dcloudio/uni-app'
import { getAddressListApi } from '@/apis/address.js'

const toAddSite = (id) => {

  let url = '/pages/address/addSite'
  if (id) {
    url = url + '?id=' + id
  }
  route({
    url: url,
    type: 'to'
  })

}
const addressList = ref([])

const getAddressList = async () => {
  const res = await getAddressListApi()
  addressList.value = res.data.data
}



onShow(() => {
  getAddressList()
})

</script>

<template>
  <view class="page">
    <view class="nav">
      <up-navbar :placeholder="true" border :autoBack="true" title="地址管理">
        <template #right>
          <up-text @click="toAddSite(null)" type="primary" text="新增地址"></up-text>
        </template>
      </up-navbar>
    </view>

    <view class="list">
      <view class="item" v-for="(item) in addressList" :key="item.id" @click="toAddSite(item.id)">
        <view class="top">
          <view class="name">{{ item.userName }}</view>
          <view class="phone">{{ item.userPhone }}</view>
          <view class="tag" v-if="item.defaultFlag">
            <up-tag text="默认" type="warning" shape="circle"></up-tag>
          </view>
        </view>
        <view class="bottom">
          {{ item.provinceName + item.cityName + item.regionName + item.detailAddress }}
          <up-icon name="edit-pen" :size="30" color="#999999"></up-icon>
        </view>
      </view>

    </view>
  </view>
</template>


<style lang="scss" scoped>
.list {
  padding: 10rpx 20rpx;

  .item {
    padding: 40rpx 20rpx;
    border-bottom: 1px solid #eeeeee;

    // 获取最后一个
    &:last-child {
      border-bottom: 0;
    }

    .top {
      display: flex;
      font-weight: bold;
      font-size: 34rpx;

      .phone {
        margin-left: 60rpx;
      }

      .tag {
        margin-left: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

    .bottom {
      display: flex;
      margin-top: 20rpx;
      font-size: 28rpx;
      justify-content: space-between;
      color: #999999;
    }
  }



}
</style>
